[react-devtools-facade] 3/ implement profiler tools #36598
Open
hoxyq wants to merge 5 commits into
Open
Conversation
hoxyq
changed the title
hoxyq
force-pushed
the
rdt-facade-3-profiler
branch
from
f4e0f7a to
873639a
Compare
hoxyq
force-pushed
the
rdt-facade-3-profiler
branch
from
873639a to
15efdb5
Compare
Introduces react-devtools-facade, a private, source-only library of building
blocks for querying React runtime state.
This first commit adds installFacade(target): it installs only
__REACT_DEVTOOLS_GLOBAL_HOOK__ (the global React looks for at init) and returns
a Facade handle {hook, fiberRoots, rendererInternals, profilingState}. It
installs no tool globals — integrators (e.g. a chrome-devtools-mcp package)
compose the Facade into tools and decide what to expose.
Its tests rely on the devtools build/dev setup, so the package is excluded from
the general test runners and runs only under the build-devtools jest project —
matching react-devtools-shared and react-devtools-extensions.
Tool building blocks and a createTools(facade) assembler land in follow-ups.
inspectHooks/inspectHooksOfFiber default currentDispatcher to ReactSharedInternals, and shared/ReactSharedInternals imports React — so bundling them drags all of React in, even for callers that always pass the renderer's injected dispatcher (e.g. react-devtools-facade). Extract the shared logic into private inspectHooksImpl / inspectHooksOfFiberImpl, which require an explicit dispatcher and never reference ReactSharedInternals. inspectHooks and inspectHooksOfFiber keep their existing behavior as thin wrappers that supply the ReactSharedInternals default. Add exported inspectHooksWithoutDefaultDispatcher and inspectHooksOfFiberWithoutDefaultDispatcher that delegate to the Impls directly, so a bundle importing only them references no React.
Move getDispatcherRef out of backend/fiber/renderer.js into backend/shared/DevToolsReactDispatcher.js and import it back. This lets other consumers (e.g. react-devtools-facade) reuse the renderer-dispatcher adapter without importing the whole renderer module.
Adds the component-tree building blocks and the createTools assembler. createTools(facade) reads the facade's tracked state and returns the tools object (no globals): getComponentTree, getComponentByLabel, findComponents, getComponentSource, getOwnersStack, getOwnersBranch. Tools return typed plain JavaScript values (see DevToolsFacadeTreeTools); serialization is left to the integration package. getComponentByLabel includes the component's props and, for function components, its inspected hooks tree, obtained via react-debug-tools' inspectHooksOfFiberWithoutDefaultDispatcher with the renderer's injected dispatcher (normalized by getDispatcherRef), so the facade never falls back to (and bundles) React's shared internals.
Adds the profiler building blocks to createTools: startProfiling, stopProfiling, getTraceOverview, getCommitReport. A profiling session records per-commit render timing (via the hook's onCommit/onPostCommit, wired in the scaffold commit) and reports per-component actual/self durations, sorted descending. Tools return typed plain JavaScript values; serialization is left to the integration package.
hoxyq
force-pushed
the
rdt-facade-3-profiler
branch
from
15efdb5 to
4b519bd
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Stacked on #36597, see this commit.
Adds the profiler building blocks to
createTools— per-commit render timing on top of the component-tree tools from commit 2.Tools
startProfiling(name?)→{status: 'started', trace}. Begins a session that records timing on every commit. Errors if a session is already active.stopProfiling()→{status: 'stopped', trace, commits}(commit count). Errors if no session is active.getTraceOverview(traceName)→ one row per commit:{commit, committedAt, renderDuration, layoutDuration, passiveDuration, componentsChanged}.getCommitReport(traceName, commitIndex)→ one commit's detail:{committedAt, priority, renderDuration, layoutDuration, passiveDuration, components}, wherecomponentsis{label, name, type, actualDuration, selfDuration}sorted byactualDurationdescending.Durations are in milliseconds, or
nullwhen the build does not collect profilertiming.
passiveDurationis attributed per root via the hook's post-commit pass.